﻿<%@ Page Title="" Language="C#" MasterPageFile="~/templates/general.master" AutoEventWireup="true" CodeFile="device.aspx.cs" Inherits="device" %>

<%@ MasterType VirtualPath="~/templates/general.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/font-awesome.min.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/animate-custom.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-css.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-responsive.css")%>" rel="stylesheet" />
    <link rel="stylesheet" href="<%=Page.ResolveUrl("~/css/wizard/icomoon.css")%>" />
    <script src="<%=Page.ResolveUrl("~/scripts/device.js")%>"></script>
    <link href="<%=Page.ResolveUrl("~/css/scroll/jquery.mCustomScrollbar.css")%>" rel="stylesheet" />
    <script src="<%=Page.ResolveUrl("~/js/scroll/jquery.mCustomScrollbar.concat.min.js")%>"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA95d2BretRzt0NKif0eZSwuiKWhbSPLmQ&sensor=false"></script>

    <style type="text/css">
        .onoffswitch
        {
            position: relative;
            width: 100px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .onoffswitch-checkbox
        {
            display: none;
        }

        .onoffswitch-label
        {
            display: block;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #999999;
            border-radius: 0px;
        }

        .onoffswitch-inner
        {
            width: 200%;
            margin-left: -100%;
            -moz-transition: margin 0.3s ease-in 0s;
            -webkit-transition: margin 0.3s ease-in 0s;
            -o-transition: margin 0.3s ease-in 0s;
            transition: margin 0.3s ease-in 0s;
        }

            .onoffswitch-inner:before, .onoffswitch-inner:after
            {
                float: left;
                width: 50%;
                height: 31px;
                padding: 0;
                line-height: 27px;
                font-size: 14px;
                color: white;
                font-family: Trebuchet, Arial, sans-serif;
                font-weight: bold;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 2px solid transparent;
                background-clip: padding-box;
            }

            .onoffswitch-inner:before
            {
                content: "Public";
                padding-left: 10px;
                background-color: #2E8DEF;
                color: #FFFFFF;
            }

            .onoffswitch-inner:after
            {
                content: "Private";
                padding-right: 10px;
                background-color: #2E8DEF;
                color: #FFFFFF;
                text-align: right;
            }

        .onoffswitch-switch
        {
            width: 22px;
            margin: 0px;
            background: #000000;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 78px;
            -moz-transition: all 0.3s ease-in 0s;
            -webkit-transition: all 0.3s ease-in 0s;
            -o-transition: all 0.3s ease-in 0s;
            transition: all 0.3s ease-in 0s;
        }

        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner
        {
            margin-left: 0;
        }

        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch
        {
            right: 0px;
        }


        /* Shared Devices */
        .onoffswitch-shared
        {
            position: relative;
            width: 73px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .onoffswitch-shared-checkbox
        {
            display: none;
        }

        .onoffswitch-shared-label
        {
            display: block;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #999999;
            border-radius: 0px;
        }

        .onoffswitch-shared-inner
        {
            width: 200%;
            margin-left: -100%;
            -moz-transition: margin 0.3s ease-in 0s;
            -webkit-transition: margin 0.3s ease-in 0s;
            -o-transition: margin 0.3s ease-in 0s;
            transition: margin 0.3s ease-in 0s;
        }

            .onoffswitch-shared-inner:before, .onoffswitch-shared-inner:after
            {
                float: left;
                width: 50%;
                height: 31px;
                padding: 0;
                line-height: 27px;
                font-size: 14px;
                color: white;
                font-family: Trebuchet, Arial, sans-serif;
                font-weight: bold;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 2px solid transparent;
                background-clip: padding-box;
            }

            .onoffswitch-shared-inner:before
            {
                content: "ON";
                padding-left: 10px;
                background-color: #96BF01;
                color: #FFFFFF;
            }

            .onoffswitch-shared-inner:after
            {
                content: "OFF";
                padding-right: 10px;
                background-color: #96BF01;
                color: #FFFFFF;
                text-align: right;
            }

        .onoffswitch-shared-switch
        {
            width: 25px;
            margin: 0px;
            background: #000000;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 48px;
            -moz-transition: all 0.3s ease-in 0s;
            -webkit-transition: all 0.3s ease-in 0s;
            -o-transition: all 0.3s ease-in 0s;
            transition: all 0.3s ease-in 0s;
        }

        .onoffswitch-shared-checkbox:checked + .onoffswitch-shared-label .onoffswitch-shared-inner
        {
            margin-left: 0;
        }

        .onoffswitch-shared-checkbox:checked + .onoffswitch-shared-label .onoffswitch-shared-switch
        {
            right: 0px;
        }

        .one
        {
            width: 70%;
            float: left;
        }

        .two
        {
            width: 30%;
            float: right;
        }

        .one-custom
        {
            width: 30%;
            float: left;
        }

        .two-custom
        {
            width: 70%;
            float: right;
        }

        .color-white
        {
            color: #ffffff !important;
        }

        .text-2x
        {
            font-size: 1.5em;
            vertical-align: middle;
        }

        #navarrow
        {
            text-decoration: none;
        }

        .tr-row, input-share
        {
            color: #fff;
            width: 96%;
            padding: 2%;
            border: 0;
            margin-top: 10px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-family: Trebuchet, Arial, sans-serif;
        }
    </style>
    <script>
        (function ($) {
            $(window).load(function () {
                $("#device-list").mCustomScrollbar({
                    autoHideScrollbar: true,
                    theme: "dark-thin",
                    advanced: {
                        updateOnContentResize: true,
                        updateOnBrowserResize: true
                    }
                });
                $("#sensor-list").mCustomScrollbar({
                    autoHideScrollbar: true,
                    theme: "dark-thin",
                    advanced: {
                        updateOnContentResize: true,
                        updateOnBrowserResize: true
                    }
                });
            });
        })(jQuery);
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="fullScreenItem loading" id="devicePage">

        <!-- Start Main Item - Metro Style -->
        <div class="nav-metro">
            <a id="navarrow" style="display: inline;" class="backward color-white text-2x" href="<%=Page.ResolveUrl("~/mydevices.aspx")%>">
                <i class="icomo-arrow-left"></i>
            </a>
            <!-- Start Sub Menu -->
            <input type="radio" class="nav-subctrl" id="submenu-2" name="navion">
            <div class="nav-submenu animated nav-fadeInUp">

                <!-- Start Sub Tab - Device Details -->
                <label class="nav-subtab subtab-pos-2 solid-orange-2" for="nav-subtab-3c">
                    <span>Description</span>
                </label>
                <!-- End Sub Tab - Device Details -->

                <!-- Start Sub Tab Content - Device Details -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-3c" checked />
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-2 solid-orange-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="deleteInfo solid-blue-2 light-text" style="text-align: center; display: none; height: 40px; margin-left: 20px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            The device has been removed. You are not able to access this device, navigate to previous page.
                        </div>
                        <div id="descriptiontab" class="nav-col-0 dark-text">
                            <div id="device-list" style="height: 350px;"></div>
                        </div>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Device Details -->

                <!-- Start Sub Tab - Sensors -->
                <label class="nav-subtab subtab-pos-3 solid-green-2" for="nav-subtab-2c">
                    <span>Sensors</span>
                </label>
                <!-- End Sub Tab - Sensors -->

                <!-- Start Sub Tab Content - Sensors -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-2c">
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-3 solid-green-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="deleteInfo solid-blue-2 light-text" style="text-align: center; display: none; height: 40px; margin-left: 20px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            The device has been removed. You are not able to access this device, navigate to previous page.
                        </div>
                        <div id="sensorstab" class="nav-col-0 dark-text">
                            <div id="sensor-list" style="height: 350px;"></div>
                        </div>
                        <div class="clearspace"></div>
                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Sensors -->

                <!-- Start Sub Tab - Share -->
                <label class="nav-subtab subtab-pos-4 solid-blue-2" for="nav-subtab-4c">
                    <span>Share</span>
                </label>
                <!-- End Sub Tab - Share -->

                <!-- Start Sub Tab Content - Share -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-4c">
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-4 solid-blue-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="deleteInfo solid-blue-2 light-text" style="text-align: center; display: none; height: 40px; margin-left: 20px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            The device has been removed. You are not able to access this device, navigate to previous page.
                        </div>

                        <div class="submitResults nav-submitbt light-text" style="display: none; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></div>
                        <div id="publicError" class="nav-submitbt solid-blue-2 light-text" style="display: none; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">Device is already public. Nothing private to share.</div>

                        <div id="sharetab" class="nav-col-0 dark-text">
                            <div id="share-col" style="display: none;">
                                <div class="one">
                                    <input id="shareUsername" type="text" onfocus="if(this.value=='Type Username to share the device with') this.value=''" onblur="this.value=this.value==''?'Type Username to share the device with':this.value;" maxlength="100" value="Type Username to share the device with" name="shareUsername" class="solid-blue-2 light-text" style="text-align: center; width: 96%; color: #fff; padding: 2%; border: 0; margin-top: 10px; height: 34px; line-height: 34px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                                <div class="two">
                                    <input id="btnShare" type="submit" value="Share" name="btnShare" class="solid-green-2 light-text" style="cursor: pointer; text-align: center; width: 96%; color: #fff; padding: 2%; border: 0; margin-top: 10px; height: 59px; line-height: 34px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                        </div>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Share -->

                <!-- Start Sub Tab - Manage -->
                <label class="nav-subtab subtab-pos-5 solid-purple" for="nav-subtab-5c">
                    <span>Manage</span>
                </label>
                <!-- End Sub Tab - Manage -->

                <!-- Start Sub Tab Content - Manage -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-5c">
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-5 solid-purple"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div id="manageInfo" class="solid-blue-2 light-text" style="text-align: center; display: none; height: 40px; margin-left: 20px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                        </div>
                        <div id="manage-edit" class="nav-col-3 dark-text">
                            <div class="nav-contactform">
                                <input id="updateDeviceName" type="text" onfocus="if(this.value==this.value) this.value=''" onblur="this.value=this.value==''?this.value:this.value;" maxlength="100" value="" name="updateDeviceName" class="solid-blue-2 light-text" />
                                <%-- <div id="updateCoords" class="solid-blue-2 light-text" style="text-align: center; height: 40px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                    Location
                                </div>--%>
                                <div id="hidden-coords" style="display: none;"></div>
                                <div id="hidden-res" style="display: none;"></div>
                                <div id="map-canvas" style="height: 180px; width: 100%; margin-bottom: 10px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>

                                <textarea id="updateDescription" onfocus="if(this.value==this.value) this.value=''" onblur="this.value=this.value==''?this.value:this.value;" name="Description" class="solid-blue-2 light-text" style="height: 70px;">Description...</textarea>
                                <div id="container1" style="width: 450px; margin-bottom: 10px;">
                                    <div id="privacy" class="solid-blue-2 light-text" style="float: left; height: 17px; width: 37%; margin-right: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif;">
                                        Privacy.
                                    </div>
                                    <div class="onoffswitch" style="float: left;">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked />
                                        <label class="onoffswitch-label" for="myonoffswitch">
                                            <div class="onoffswitch-inner"></div>
                                            <div class="onoffswitch-switch"></div>
                                        </label>
                                    </div>
                                </div>
                                <label id="addNew" class="nav-submitbt solid-green-2 light-text" for="nav-updatedevice" style="margin-top: 55px; text-align: center;">
                                    <span>Update</span>
                                </label>
                                <input type="submit" class="none" value="" id="nav-updatedevice" name="submit" />
                            </div>
                        </div>

                        <div id="manage-share" class="nav-col-3 dark-text">
                            <div id="txtstopSharing" class="solid-green-2 light-text" style="text-align: center; display: none; height: 40px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                Device is already public and accessible by everyone.
                            </div>
                            <div id="btnStopSharing">
                                <span class="privacy-title">Shared</span>
                                <div id="switch-shared" class="onoffswitch-shared" style="float: right;">
                                    <input type="checkbox" name="onoffswitch-shared" class="onoffswitch-shared-checkbox" id="myonoffswitch-shared" checked />
                                    <label class="onoffswitch-shared-label" for="myonoffswitch-shared">
                                        <div class="onoffswitch-shared-inner"></div>
                                        <div class="onoffswitch-shared-switch"></div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div id="manage-delete" class="nav-col-3 dark-text">

                            <div class="solid-blue-2 light-text" style="height: 65px; margin-left: 20px; margin-right: 15px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">Warning! This action will remove all data associated with this device. You might not be able to access this device anymore.</div>
                            <div id="btnDeleteDevice" class="solid-red light-text" style="text-align: center; height: 40px; cursor: pointer; margin-left: 20px; margin-right: 15px; margin-bottom: 10px; font-size: 18px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 37px;">
                                Delete
                            </div>
                        </div>


                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Manage -->




                <!-- Start Sub Tab - Repository -->
                <label class="nav-subtab subtab-pos-6 solid-olive" for="nav-subtab-6c">
                    <span>Repository</span>
                </label>
                <!-- End Sub Tab - Repository -->

                <!-- Start Sub Tab Content - Repository -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-6c">
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-6 solid-olive"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="deleteInfo solid-blue-2 light-text" style="text-align: center; display: none; height: 40px; margin-left: 20px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            The device has been removed. You are not able to access this device, navigate to previous page.
                        </div>
                        <div id="updateRepoInfo" class="solid-blue-2 light-text" style="text-align: center; display: none; height: 40px; margin-left: 20px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                        </div>
                        <div id="repositorytab" class="nav-col-2 dark-text">
                            <div id="currentRepo" class="solid-olive light-text" style="text-align: center; height: 47px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                Details about the current repository.                   
                            </div>
                            <div class="one-custom">
                                <div id="lblDbName" class="solid-blue-2 light-text" style="text-align: center; height: 47px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                    Database Name                                 
                                </div>
                            </div>
                            <div class="two-custom">
                                <div id="dbName" class="solid-blue-2 light-text" style="text-align: center; height: 40px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                </div>
                            </div>
                            <div class="one-custom">
                                <div id="lblPortNumber" class="solid-blue-2 light-text" style="text-align: center; height: 47px;  margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                    Port Number                                 
                                </div>
                            </div>
                            <div class="two-custom">
                                <div id="portNumber" class="solid-blue-2 light-text" style="text-align: center; height: 40px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                </div>
                            </div>

                            <div class="one-custom">
                                <div id="lblDBServer" class="solid-blue-2 light-text" style="text-align: center; height: 47px;  margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                    DB Server                                 
                                </div>
                            </div>
                            <div class="two-custom">
                                <div id="dbServer" class="solid-blue-2 light-text" style="text-align: center; height: 40px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                </div>
                            </div>
                        </div>
                        <div id="repositorytab-edit" class="nav-col-2 dark-text">
                            <div id="customRepo" class="solid-olive light-text" style="text-align: center; height: 47px; margin-left: 20px; margin-right: 16px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                Custom Repository. Use your own database to store the data.                     
                            </div>
                            <div class="nav-contactform">
                                <input id="updateDatabaseName" type="text" onfocus="if(this.value=='Database Name') this.value=''" onblur="this.value=this.value==''?'Database Name':this.value;" maxlength="100" value="Database Name" name="databaseName" class="solid-blue-2 light-text" style="width:88%;margin-left:20px;"/>
                                <input id="updatePortNumber" type="text" onfocus="if(this.value=='Port Number') this.value=''" onblur="this.value=this.value==''?'Port Number':this.value;" maxlength="100" value="Port Number" name="portNumber" class="solid-blue-2 light-text" style="width:88%;margin-left:20px;"/>
                                <input id="updateDBServer" type="text" onfocus="if(this.value=='Connection String') this.value=''" onblur="this.value=this.value==''?'Connection String':this.value;" maxlength="100" value="Connection String" name="connectionString" class="solid-blue-2 light-text" style="width:88%;margin-left:20px;"/>
                                <label id="lblAddNewDatabase" class="nav-submitbt solid-green-2 light-text" for="nav-addnewDatabase" style="margin-top: 35px; width:88%;margin-left:20px; text-align: center;" >
                                    <span>Update Repository</span>
                                </label>
                                <input type="submit" class="none" value="" id="nav-addnewDatabase" name="submit"/>
                            </div>
                        </div>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Repository -->

            </div>
            <!-- End Sub Menu -->

        </div>
        <!-- End Main Item - Metro Style -->

    </div>
</asp:Content>

